<template>
  <div class="jl">
    <div class="el-input_head">
      <el-input
        placeholder="输入职称信息"
        class="jlAddInput"
        suffix-icon="el-icon-plus"
        v-model="jl.name"
        @keydown.enter.native="doJobLevelAdd"
      ></el-input>
      <el-select
        v-model="jl.titleLevel"
        class="el-select__input"
        filterable
        placeholder="职称等级"
        @keydown.enter.native="doJobLevelAdd"
      >
        <el-option
          v-for="item in jobLevelEnum"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-plus" @click="doJobLevelAdd"
        >添加
      </el-button>
      <el-button
        type="danger"
        :disabled="this.multipleSelectionJL == 0"
        @click="doJobLevelBatchDelete"
        >批量刪除
      </el-button>
    </div>
    <div>
      <el-table
        :data="jobLevel"
        stripe
        border
        class="el-table jlTable perBorder"
        @selection-change="handleSelectionChange"
      >
        <el-table-column width="50" type="selection"></el-table-column>
        <el-table-column prop="id" label="id" width="80" sortable>
        </el-table-column>
        <el-table-column prop="name" label="职位" width="180" sortable>
        </el-table-column>
        <el-table-column
          prop="titleLevel"
          label="titleLevel"
          width="80"
          sortable
        >
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="enabled" label="是否启用" width="80">
          <template slot-scope="scope">
            <!--                        <el-switch :value="scope.row.enabled" disabled></el-switch>-->
            <el-tag type="success" v-if="scope.row.enabled">启用</el-tag>
            <el-tag type="danger" v-else>未启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              size="medium"
              @click="showEditJobLevelView(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              size="medium"
              type="danger"
              @click="doJobLevelDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="编辑职称" :visible.sync="dialogFormVisible" width="30%">
      <div class="updateDialogInfo">
        <el-tag>职称名称</el-tag>
        <el-input
          v-model="updateJL.name"
          class="updateDialogInput el-update_input"
        ></el-input>
        <el-tag>职称等级</el-tag>
        <el-select
          v-model="updateJL.titleLevel"
          size="medium"
          style="margin: 10px 0 10px 15px; width: 200px"
          filterable
          placeholder="职称等级"
        >
          <el-option
            v-for="item in jobLevelEnum"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-tag>是否启用</el-tag>
        <el-switch
          v-model="updateJL.enabled"
          class="updateDialogInput el-update_input"
        ></el-switch>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doJobLevelUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "JobLevelMana",
  //import引入的组件需要注入到对象中才能使用",
  components: {},
  data() {
    const jobLevelEnum = [
      {
        value: "员级",
        label: "员级"
      },
      {
        value: "初级",
        label: "初级"
      },
      {
        value: "中级",
        label: "中级"
      },
      {
        value: "副高级",
        label: "副高级"
      },
      {
        value: "正高级",
        label: "正高级"
      }
    ];
    //这里存放数据",
    return {
      //后端获取的
      jobLevel: {},
      //前端发送的joblevel
      jl: {
        name: "",
        titleLevel: "",
        enabled: ""
      },
      //更新窗口绑定数据用的
      updateJL: {
        name: "",
        titleLevel: "",
        enabled: ""
      },
      //职称低等级字典
      jobLevelEnum,
      //dialog弹窗
      dialogFormVisible: false,
      //checkbox勾选的行内数据
      multipleSelectionJL: []
    };
  },
  //监听属性 类似于data概念",
  computed: {},
  //方法集合",
  methods: {
    //初始化职位信息
    initJobLevels() {
      this.getRequest("/system/basic/joblevel/").then(resp => {
        if (resp) {
          this.jobLevel = resp;
        }
      });
    },
    //添加方法
    doJobLevelAdd() {
      if (this.jl.name) {
        this.postRequest("/system/basic/joblevel/", this.jl)
          .then(resp => {
            if (resp) {
              this.initJobLevels();
              this.jl.name = "";
              this.jl.titleLevel = "";
            }
          })
          .catch(() => {});
      } else {
        this.$message.error("职称名称不能为空");
      }
    },
    //更新职位信息
    doJobLevelUpdate() {
      this.putRequest("/system/basic/joblevel/", this.updateJL)
        .then(resp => {
          if (resp) {
            this.initJobLevels();
            this.dialogFormVisible = false;
          }
        })
        .catch(() => {});
    },
    //更新职位信息，弹窗中数据绑定
    showEditJobLevelView(index, data) {
      this.dialogFormVisible = true;
      Object.assign(data.enabled, this.updateJL.enabled);
      //复制数据的方法，防止弹窗中和页面的数据在输入时同时更新，解除二者关联性
      Object.assign(this.updateJL, data);
      this.updateJL.createDate = "";
    },
    //删除职位信息
    doJobLevelDelete(index, data) {
      this.$confirm(
        "此操作将永久删除 [" +
          data.name +
          "(" +
          data.titleLevel +
          ")" +
          "] 职位,是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "waring"
        }
      )
        .then(() => {
          this.deleteRequest("/system/basic/joblevel/" + data.id).then(resp => {
            if (resp) {
              this.initJobLevels();
            }
          });
        })
        .catch(() => {});
    },
    //checkbox多选时将数据存起来
    handleSelectionChange(val) {
      this.multipleSelectionJL = val;
    },
    //批量删除职称
    doJobLevelBatchDelete() {
      this.$confirm(
        "此操作将永久删除 [" +
          this.multipleSelectionJL.length +
          "] 个职称,是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "waring"
        }
      ).then(() => {
        //后端请求的就是数组
        let ids = [];
        this.multipleSelectionJL.forEach(item => {
          ids.push(item.id);
        });
        //那就直接给后端传数组，拼接字符串反倒会404 Bad Request 失败。
        //tips:有一个前端序列化的插件，qs => npm install qs -S
        this.deleteRequest("/system/basic/joblevel/", ids).then(resp => {
          if (resp) {
            this.initJobLevels();
          }
        });
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
    this.initJobLevels();
  }
};
</script>

<style>
.jlAddInput {
  width: 300px;
}

.jlTable {
  width: 875px;
}
.jl .updateDialogInfo {
  width: 350px;
  margin: 0 auto;
}
.jl .updateDialogInput {
  width: 220px;
}
</style>
